<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TouchSpin  - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="/assets/plugins/custom/bootstrap-touchspin/bootstrap-touchspin.bundle.css" rel="stylesheet" type="text/css"/>

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap TouchSpin</code>插件 <span class="badge badge-warning badge--inline">需手动引入css/js</span>
                    <a class="e-link e-font-bold" href="https://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">官方文档</a>
                    <a class="e-link e-font-bold" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin" target="_blank">Github</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <form class="e-form">
                <div class="card">
                    <div class="card-head">
                        <div class="card-head-label">
                            <h3 class="card-head-title">
                                基础
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="e-section">
                            <div class="e-section-title">默认</div>
                            <div class="e-section-info">
                                框架中默认会将<code>.touch-spin</code>当做TouchSpin初始化，默认整数，递增/减量为1
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3 col-sm-12">默认：</label>
                                    <div class="col-lg-4 col-md-9 col-sm-12">
                                        <input type="number" class="form-control touch-spin" value="50">
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>

                            <div class="e-section-title">最大/小值</div>
                            <div class="e-section-info">
                                你可以在<code>.touch-spin</code>上添加<code>[data-min="0"]</code>、<code>[data-max="100"]</code>设置最大值与最小值
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3 col-sm-12">最大/小值：</label>
                                    <div class="col-lg-4 col-md-9 col-sm-12">
                                        <input type="number" class="form-control touch-spin" value="50" data-min="0" data-max="100">
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>

                            <div class="e-section-title">小数</div>
                            <div class="e-section-info">
                                你可以在<code>.touch-spin</code>上添加<code>[data-decimals="1"]</code>、<code>[data-step="0.1"]</code>设置小数位数、递增/减量
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3 col-sm-12">小数：</label>
                                    <div class="col-lg-4 col-md-9 col-sm-12">
                                        <input type="number" class="form-control touch-spin" value="50" data-min="0" data-max="100" data-decimals="1" data-step="0.1">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="e-form">
                <div class="card">
                    <div class="card-head">
                        <div class="card-head-label">
                            <h3 class="card-head-title">
                                高级
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="e-section">

                            <div class="e-section-title">前缀</div>
                            <div class="e-section-info">
                                你可以在<code>.touch-spin</code>上添加<code>[data-prefix="¥"]</code>设置前缀
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3 col-sm-12">前缀：</label>
                                    <div class="col-lg-4 col-md-9 col-sm-12">
                                        <input type="number" class="form-control touch-spin" value="50" data-min="0" data-max="100" data-decimals="2" data-step="0.1" data-prefix="¥">
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>

                            <div class="e-section-title">后缀</div>
                            <div class="e-section-info">
                                你可以在<code>.touch-spin</code>上添加<code>[data-postfix="¥"]</code>设置前缀
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3 col-sm-12">后缀：</label>
                                    <div class="col-lg-4 col-md-9 col-sm-12">
                                        <input type="number" class="form-control touch-spin" value="50" data-min="0" data-max="100" data-decimals="2" data-step="0.1" data-postfix="¥">
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>

                            <div class="e-section-title">垂直方向按钮</div>
                            <div class="e-section-info">
                                你可以在<code>.touch-spin</code>上添加<code>[data-vertical="true"]</code>设置按钮使用垂直方向排列
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3 col-sm-12">垂直方向按钮：</label>
                                    <div class="col-lg-4 col-md-9 col-sm-12">
                                        <input type="number" class="form-control touch-spin" value="50" data-min="0" data-max="100" data-decimals="2" data-step="0.1" data-vertical="true">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
<script src="/assets/plugins/custom/bootstrap-touchspin/bootstrap-touchspin.bundle.js"></script>
</body>
</html>